<template>
  <div>
    <div class="comment" v-for="comment in data" :key="comment.id">
      <span class="anchor" :id="`comment-${comment.id}`"></span>
      <a class="ui circular image avatar">
        <img :src="comment.avatar" />
      </a>
      <div class="content">
        <el-button
          type="text"
          :icon="
            showList[comment.id] == true
              ? `el-icon-arrow-down`
              : `el-icon-arrow-right`
          "
          @click="changeShowStatus(comment.id)"
        ></el-button>
        <a
          class="nickname"
          :href="
            comment.website != '' && comment.website != null
              ? comment.website
              : null
          "
          target="_blank"
          rel="external nofollow noopener"
          >{{ comment.nickname }}</a
        >
        <div
          class="ui black left pointing label"
          v-if="comment.isAdminComment == 1"
        >
          {{ $store.getters.siteInfo.commentAdminFlag }}
        </div>
        <div class="metadata">
          <strong class="date">{{
            comment.createTime | dateFormat('YYYY-MM-DD HH:mm')
          }}</strong>
        </div>
        <el-button size="mini" type="primary" @click="setReply(comment.id)"
          >回复</el-button
        >
        <div class="text" v-html="comment.content"></div>
      </div>
      <CommentTree
        v-show="showList[comment.id]"
        v-if="comment.children.length > 0"
        :data="comment.children"
      ></CommentTree>
      <div class="border"></div>
      <CommentForm v-if="parentCommentId === comment.id" />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { SET_PARENT_COMMENT_ID } from '@/store/mutations-types'
import CommentForm from './CommentForm'
export default {
  name: 'CommentTree',
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showList: {}
    }
  },
  computed: {
    ...mapState({
      parentCommentId: state => state.comment.parentCommentId
    })
  },
  components: {
    CommentTree: this,
    CommentForm
  },
  methods: {
    setReply(id) {
      this.$store.commit(SET_PARENT_COMMENT_ID, id)
    },
    changeShowStatus(id) {
      let isShow = this.showList[id]
      if (isShow) {
        this.$set(this.showList, id, false)
      } else {
        this.$set(this.showList, id, true)
      }
    }
  }
}
</script>
<style scoped>
.comments + .border {
  position: absolute;
  left: 34px;
  top: 47px;
  bottom: 0;
  border-style: solid;
  border-width: 0 0 0 1px;
  border-color: #e0e0e0;
}

.ui.threaded.comments .comment .comments {
  box-shadow: none;
  margin-top: -2em;
}

.comment {
  padding-right: 2em !important;
  padding-left: 1em !important;
}

.nickname {
  font-weight: bolder;
  color: #000;
}

.comment .el-button {
  margin-left: 5px;
  padding: 4px 5px;
}

.comment > .anchor {
  position: absolute;
  left: 0;
  top: -48px;
}

.comment .comments .comment > .anchor {
  top: -55px;
}

.ui.comments .comment .avatar {
  width: 40px !important;
  margin: 0;
}

.ui.comments .comment .text {
  white-space: pre-wrap !important;
  margin-top: 7px;
  line-height: 1.5;
}

.ui.comments .comment .text a {
  cursor: pointer;
  margin-right: 8px;
  font-weight: bolder;
  color: rgba(0, 0, 0, 0.87);
}

.ui.comments .comment .text div {
  display: inline;
}

.label {
  cursor: default;
  padding: 4px 6px !important;
  font-weight: 500 !important;
}

.comment .form {
  margin-top: 20px;
}
</style>
